<template>
  <div class="sidebar">
    <ul class="border-right" ref="tabWrapper">
      <li
        class="border-topbottom"
        :class="{ active: index === currentIndex }"
        v-for="(title, index) in titles"
        :key="index"
        @click="itemClick(index)"
      >
        {{ title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'sidebar',
  data () {
    return {
      currentIndex: 0,
      titles: ['品类', '空间', '风格']
    }
  },
  methods: {
    /* 在data中定一个currentIndex 为 0，一开始就让第一个元素显示active类效果，
    点击然后把对应的index传过去，做一个判断如果index等于currentIndex的值就显示
    */
    itemClick(index) {
      this.currentIndex = index
      this.$bus.$emit("tabClick",index)
    }
  }
}
</script>

<style lang="less" scoped>
.sidebar {
  float: left;
  margin-top: .44rem;
  ul {
    position: fixed;
    height: 100%;
    li {
      width: 0.84rem;
      height: 0.44rem;
      color: #999;
      text-align: center;
      line-height: 0.44rem;
      font-size: 0.15rem;
    }
    .active {
      color: #d20a0a;
      border-left: 0.03rem solid #d20a0a;
    }
  }
}
</style>
